<template>
  <div class="newPrimaryClass">
    <div class="newPrimaryClass_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">新增一级分类<i class="el-icon-close"></i></div>
    </div>
    <!-- 商家类型与返回 -->
    <div class="newPrimaryClass_type">
      <div>泛家居分类/<span>{{this.form.cate_id?"编辑":"新增"}}一级分类</span></div>
      <el-button @click="toBack" type="success">返回</el-button>
    </div>

    <!-- 新增分类信息 -->
    <div class="classInfo">
      <div class="className">
        <span>分类名称</span>
        <input type="text" maxlength="7" v-model="form.cate_name" placeholder="请输入">
      </div>
      <div class="classImg">
        <span>图标</span>
        <div class="toFile" v-if="cate_logo==''">
          <input type="file" @change="toUploadLogo" accept="image/png, image/jpeg, image/gif, image/jpg">
          <div><i class="el-icon-plus"></i>上传照片</div>
        </div>
        <div class="cateImg" v-else>
          <img :src="cate_logo" alt="">
          <div class="cateImgShadow">
            <i @click="delCateImg" class="el-icon-delete"></i>
          </div>
        </div>
      </div>
      <div class="classSort">
        <span>排序</span>
        <input type="number" v-model="form.sort" placeholder="请输入">
      </div>
      <div class="classSort">
          <span>卖场</span>
          <el-select
            v-model="form.market_id"
            clearable
            @change="selectMarket"
            filterable
            placeholder="请选择卖场"
          >
            <el-option
              v-for="item in marketList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
      </div>
      <div class="classShow">
        <span>热门</span>
        <el-radio v-model="form.is_hot" :label="1">是</el-radio>
        <el-radio v-model="form.is_hot" :label="0">否</el-radio>
      </div>

    </div>
    <div class="cateBtn">
      <el-button type="primary" @click="toAddCate">提交</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: 1,
        cate_logo: '',
        form: {
          cate_id: 0,
          cate_name: '',
          cate_logo: '',
          sort: null,
          pid: 0,
          is_hot: 1,
          type: 2, //泛家居
          market_id:''
        },
        marketList: [],
      }
    },
    mounted() {
      let cate_id = this.$route.query.id;
      this.form.cate_id = cate_id
      if (this.form.cate_id) {
        this.getCateInfo()
      }
      this.remoteMethod();
    },
    methods: {
      // 获取卖场列表
      remoteMethod() {
        this.$http.post("/api/root/Market/marketList").then((res) => {
          console.log(res, "卖场列表");
          if (res.code == 1) {
            this.marketList = res.data ? res.data : [];
          }
        });
      },
      // 选择卖场
      selectMarket() {

      },

      // 获取分类详情
      getCateInfo() {
        this.$http.post('/api/root/cate/cateDetail', {cate_id: this.form.cate_id}).then(res => {
          if (res.code == 1) {
            this.form = res.data
            this.form.cate_id = res.data.id
            this.cate_logo = res.data.cate_logo
            this.form.cate_logo = res.data.cate_logo_id
          }
        })
      },

      // 删除分类图片
      delCateImg() {
        this.cate_logo = '',
          this.form.cate_logo = ''
      },

      //上传分类logo
      toUploadLogo(event) {
        let file = event.target.files[0];
        let isLtSize = file.size / 1024 / 1024 < 10;
        if (!isLtSize) {
          this.$message.warning("上传文件不能超过 10MB!");
          return;
        }
        let form = new FormData();
        console.log(form);
        form.append("file", file);
        this.$http
          .post("/api/client/base/uploadfile", form)
          .then((res) => {
            console.log(res);
            if (res.code == 1) {
              this.$message({
                showClose: true,
                message: "上传成功",
                type: "success",
              });
            }
            let src = res.data.id;
            console.log(src);
            this.form.cate_logo = src;
            this.cate_logo = res.data.url
          })
          .catch((err) => {
            this.$message({
              showClose: true,
              message: "上传失败",
              type: "error",
            });
          });
      },

      //添加
      toAddCate() {
        if(this.form.market_id==''){
          this.$message.warning('请选择卖场')
          return
        }
        this.$http.post('/api/root/cate/cateUpdate', this.form).then(res => {
          if (res.code == 1) {
            this.$router.push({name: 'extClassList', params: {}});
            this.$message({
              type: 'success',
              message: !this.form.cate_id ? '添加成功' : '修改成功'
            })
          } else {
            this.$message({
              type: 'warning',
              message: res.msg
            })
          }
        })
      },

      // 返回按钮
      toBack() {
        this.$router.back(1)
      }

    }

  }
</script>

<style lang="less" scoped>
  @import 'add.less';
</style>

